{% extends 'users/base-layer.html' %}
{% load staticfiles %}

{% block main %}
    <div class="box box-danger">
        <div class="box-header with-border">
            <div class="user-block">
                <img class="img-circle" src="{{ MEDIA_URL }}{{ user.image }}" alt="User Image">
                <span class="username"><a href="javascript:void(0)">{{ user_plan.user.username }}</a></span>
                <span class="description">创建时间: {{ user_plan.add_time|date:'Y-m-d H:i:s' }}</span>
            </div>
            <!-- /.user-block -->
            <div class="box-tools">
                <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Mark as read">
                    <i class="fa fa-circle-o"></i></button>
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
            <!-- /.box-tools -->
        </div>

        <form class="form-horizontal" id="addForm" method="post">
            {% csrf_token %}
            <div class="box-body">
                <fieldset>
                    <input type="hidden" name='user' value="{{ request.user.id }}">
                    <input type="hidden" name="pk" value="{{ user_plan.id }}" id="plan-id">
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" for="start_time">开始时间</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control pull-right form_datetime" name="start_time"
                                   id="start_time" value="{{ user_plan.start_time |date:'Y-m-d H:i' }}" readonly>
                        </div>
                        <label class="col-sm-2 control-label" for="end_time">结束时间</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control pull-right form_datetime" name="end_time"
                                   id="end_time" value="{{ user_plan.end_time |date:'Y-m-d H:i' }}" readonly/>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" for="title">任务标题</label>
                        <div class="col-sm-3" style="width: 48%">
                            <input type="text" class="form-control pull-right" name="title" id="title"
                                   value="{{ user_plan.title }}" required>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" for="content">计划内容</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" name="content" id="content"
                                      rows="5">{{ user_plan.content }}</textarea>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" for="multiple">添加关注</label>
                        <div class="col-sm-3" style="width: 48%">
                            <select class="form-control select2" multiple="multiple" name="attention" id="multiple"
                                    data-placeholder="添加关注" style="width: 100%;">
                                {% for attention in users %}
                                    {% if attention in user_plan.attention.all %}
                                        <option value="{{ attention.id }}" selected>{{ attention.username }}</option>
                                    {% else %}
                                        <option value="{{ attention.id }}">{{ attention.username }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <span><small class="text-danger margin-l-5">* 关注人可以查看本条内容</small></span>
                    </div>

                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" for="status">是否完成</label>
                        <div class="col-sm-3" style="padding-top: 7px; margin-bottom: 0">
                            <input type="checkbox" class="form-control pull-right minimal" name="status" id="status">
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="box-footer ">

                <div class="row span7 text-center ">
                    {% ifequal request.user.id  user_plan.user_id %}
                        <button type="button" id="btnSave" class="btn btn-info margin-right ">保存修改</button>
                        <button type="button" id="btnDelete" class="btn btn-warning margin-right ">删除</button>
                    {% endifequal %}
                </div>
            </div>

        </form>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{% static 'jquery-confirm/dist/jquery-confirm.min.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            {% if user_plan.status == 1 %}
                $('#status').iCheck('check');
            {% endif %}
        });
        $("#btnSave").click(function () {
            let data = $("#addForm").serialize();

            $.ajax({
                type: 'POST',
                url: "{% url 'plan_info' pk %}",
                data: data,
                traditional: true,
                dataType: 'json',
                success: function (res) {
                    if (res.result) {
                        layer.alert(res.msg, {icon: 1}, function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.msg, {icon: 5});
                        //$('errorMessage').html(msg.message)
                    }
                }
            });

        });

        $('#btnDelete').on('click', function () {
            $.confirm({
                title: 'Tips',
                content: '确定要删除该任务么？',
                type: 'red',
                buttons: {
                    Ok: function () {
                        $.ajax({
                            type: "{% url 'plan_info' pk %}",
                            method: 'DELETE',
                            beforeSend: function (xhr, settings) {
                                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");

                            },
                            success: function (res) {
                                if (res.result) {
                                    layer.alert(res.msg, {icon: 1}, function () {
                                        parent.location.reload();
                                    });
                                } else {
                                    layer.alert(res.msg, {icon: 5});
                                    //$('errorMessage').html(msg.message)
                                }
                            }
                        })
                    },
                    Cancel: function () {
                        //
                    }
                }
            });
        });


        /*点取消刷新新页面*/
        $("#btnCancel").click(function () {
            window.location.reload();

        });
    </script>

{% endblock %}
